<template>
  <div>
    <el-row>
      <el-col :span="12" v-for="(o, index) in 11" :key="o" >
        <el-card shadow="always" class="cardset">
          <img src="http://schoolfleas-image.test.upcdn.net/157345612252526.jpg" class="image">
          <div style="padding: 14px 14px 3px 14px">
            <!-- title -->
            <b class="title_style">{{keycategory}}休闲西裤男夏天超爽分为七个完全覆盖哥哥伟哥伟哥俄国</b>
            <div class="price">
              <span style="color: red;">￥23</span>
              <span class="personwant">7人想要</span>
            </div>
            <hr style="color: #F8F8FF;" />
            <div class="bottom clearfix">
              <!-- headimg neck  -->
              <div class="heading">
                <img src="http://schoolfleas-image.test.upcdn.net/1-16101Q912410-L.png" />
              </div>
              <div class="showneck">滚到碗里来</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 2.75rem;"></div>
  </div>
</template>
<script>
  export default {
    props:{
      keycategory:String
    },
    data() {
      return {
        goodslist:[{
          goods_sku:'腾讯会员一个月',

        }]
      }
    }
  }
</script>

<style>
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 0px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }


    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .image{
      /* overflow: hidden; */
      width: 100%;
    }
    .el-card__body{
      padding: 0rem;
      padding-bottom: 0.3rem;
    }
    .cardset{
      margin:0.5rem 0.3rem;
    }
    .title_style{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp: 2;
    }
    .price{
      padding-top: 0.5rem;
      margin-bottom: -0.5rem;
    }
    .personwant{
      float: right;
      font-size: 15px;
    }
    .heading{
      width: 30%;
      overflow: hidden;
      float: left;
    }
    .heading img{
      width: 100%;
      border-radius: 50%;
      overflow: hidden;
      height: 40px;
    }
    .showneck{
      line-height: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
</style>
